<template>
  <el-container class="article-detail-container">
    <el-main>
      <el-row :gutter="20">
        <!-- 文章内容主体 -->
        <el-col :span="16">
          <!-- 文章卡片 -->
          <el-card class="article-content-card" shadow="hover">
            <el-header class="article-header">
              <el-row>
                <el-col :span="18">
                  <el-text class="article-title" size="large" tag="b">{{ articleData.title || articleData.name }}</el-text>
                </el-col>
                <el-col :span="6" class="article-meta">
                  <el-text size="small" type="info">
                    浏览 {{ articleData.views }} · 
                    <span v-if="articleData.likes !== undefined">点赞 {{ articleData.likes }} · </span>
                    <span v-if="articleData.comments !== undefined">评论 {{ articleData.comments }} · </span>
                    <span v-if="articleData.stars !== undefined">收藏 {{ articleData.stars }}</span>
                  </el-text>
                </el-col>
              </el-row>
              <el-row class="article-author-info">
                <el-text size="small">
                  作者：{{ articleData.username || '未知' }} · 
                  发布时间：{{ articleData.created_at || articleData.updated_at || '未知' }}
                </el-text>
              </el-row>
            </el-header>

            <el-main class="article-body">
              <!-- 封面图 -->
              <el-image
                v-if="articleData.cover_image || articleData.image_url"
                :src="articleData.cover_image || articleData.image_url"
                fit="cover"
                style="width: 100%; height: 300px"
                lazy
              ></el-image>

              <!-- 摘要 -->
              <el-alert
                v-if="articleData.summary || articleData.description"
                :title="articleData.summary || articleData.description"
                type="info"
                :closable="false"
                show-icon
              ></el-alert>

              <!-- 正文 -->
              <el-text 
                class="article-content" 
                tag="div" 
                v-html="articleData.content || articleData.detail_content || '暂无内容'"
              ></el-text>

              <!-- 标签 -->
              <el-space wrap class="article-tags">
                <el-tag
                  v-for="tag in getTags()"
                  :key="tag"
                  type="info"
                  size="small"
                >
                  {{ tag }}
                </el-tag>
              </el-space>
            </el-main>

            <el-footer class="article-actions">
              <el-button 
                v-if="articleData.stars !== undefined" 
                type="primary" 
                icon="Star"
                @click="handleStar"
              >
                收藏
              </el-button>
              <el-button 
                v-if="articleData.likes !== undefined" 
                type="success" 
                icon="Thumb"
                @click="handleLike"
              >
                点赞
              </el-button>
              <el-button 
                v-if="articleData.comments !== undefined" 
                type="info" 
                icon="ChatLineRound"
                @click="handleComment"
              >
                评论
              </el-button>
              <el-button 
                v-if="articleData.github_url" 
                type="warning" 
                icon="Link"
                @click="openLink(articleData.github_url)"
              >
                GitHub
              </el-button>
              <el-button 
                v-if="articleData.demo_url" 
                type="warning" 
                icon="Position"
                @click="openLink(articleData.demo_url)"
              >
                演示
              </el-button>
            </el-footer>
          </el-card>

          <!-- 评论区 -->
          <el-card 
            v-if="articleData.comments !== undefined" 
            class="comments-section" 
            shadow="never"
          >
            <el-header>评论区</el-header>
            <el-main>
              <el-timeline>
                <el-timeline-item
                  v-for="comment in comments"
                  :key="comment.id"
                  :timestamp="comment.time"
                  placement="top"
                >
                  <el-card>
                    <el-text tag="b">{{ comment.user }}</el-text>
                    <p>{{ comment.content }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-main>
          </el-card>
        </el-col>

        <!-- 右侧推荐内容 -->
        <el-col :span="8">
          <el-card class="recommend-card" shadow="never">
            <el-header>相关推荐</el-header>
            <el-main>
              <el-card
                v-for="item in recommendList"
                :key="item.id"
                class="recommend-item-card"
                shadow="hover"
                @click.native="goToDetail(item)"
              >
                <el-header>
                  <el-text tag="b">{{ item.title || item.name }}</el-text>
                </el-header>
                <el-main>
                  <el-text size="small">{{ item.summary || item.description }}</el-text>
                  <el-space wrap class="recommend-tags">
                    <el-tag size="mini">{{ item.type }}</el-tag>
                    <el-tag 
                      size="mini" 
                      :type="getDifficultyType(item.difficulty)"
                    >
                      {{ getDifficultyText(item.difficulty) }}
                    </el-tag>
                  </el-space>
                </el-main>
                <el-footer>
                  <el-text size="small" type="info">
                    浏览 {{ item.views }}
                    <span v-if="item.likes !== undefined">· 点赞 {{ item.likes }}</span>
                    <span v-if="item.stars !== undefined">· 收藏 {{ item.stars }}</span>
                  </el-text>
                </el-footer>
              </el-card>
            </el-main>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { BlogApi } from "@/api/system/blog"
import { AIProjectApi } from "@/api/system/aiproject"
import { ref, onMounted } from 'vue'

// 响应式数据
const articleData = ref({})
const comments = ref([])
const recommendList = ref([])

// 加载文章数据
const loadArticleData = async (id, type) => {
  console.log("测试测试", id, type)
  try {
    let data
    if (type === 'blog') {
      // 调用博客API
      const response = await BlogApi.getBlogDetail(id)
      console.log("测试响应", response)
      data = response.data
    } else {
      // 调用AI项目API
      const response = await AIProjectApi.getProjectDetail(id)
      data = response.data
    }
    articleData.value = data
  } catch (error) {
    console.error('加载文章数据失败:', error)
    
    // // 模拟数据（API调用失败时使用）
    // if (type === 'blog') {
    //   articleData.value = {
    //     id: id,
    //     title: "使用Vue构建现代前端应用",
    //     type: "tech",
    //     user: { username: "张三" },
    //     created_at: "2024-06-01",
    //     views: 1234,
    //     likes: 56,
    //     comments: 12,
    //     cover_image: "https://via.placeholder.com/800x300",
    //     summary: "本文将介绍如何使用Vue构建现代化的前端应用，涵盖组件设计、状态管理等内容。",
    //     content: "<p>这里是博客正文内容...</p><p>支持HTML渲染</p>",
    //     tags: "Vue,前端,开发"
    //   }
    // } else {
    //   articleData.value = {
    //     id: id,
    //     name: "图像识别模型",
    //     type: "计算机视觉",
    //     difficulty: 3,
    //     user: { username: "AI小助手" },
    //     updated_at: "2024-06-01",
    //     views: 856,
    //     stars: 123,
    //     image_url: "https://via.placeholder.com/800x300",
    //     description: "基于深度学习的图像识别模型，支持多种图像格式识别",
    //     detail_content: "<p>这是一个强大的图像识别项目...</p><p>技术栈：Python, TensorFlow, OpenCV</p>",
    //     github_url: "https://github.com/example/cv-project",
    //     demo_url: "https://demo.example.com",
    //     tags: "深度学习,图像识别,计算机视觉"
    //   }
    // }
  }
}

// 加载评论数据
const loadComments = async () => {
  // 模拟评论数据
  comments.value = [
    // { id: 1, user: "李四", content: "写的很好！", time: "2024-06-02 10:30" },
    // { id: 2, user: "王五", content: "学到了很多", time: "2024-06-02 11:15" },
  ]
}

// 加载推荐列表
const loadRecommendList = async () => {
  // 模拟推荐数据
  recommendList.value = [
    {
      id: 2,
      title: "React Hooks 完全指南",
      type: "tech",
      views: 987,
      likes: 45,
      summary: "深入理解React Hooks的使用和原理"
    },
    {
      id: 3,
      name: "自然语言处理入门",
      type: "nlp",
      difficulty: 1,
      views: 654,
      stars: 78,
      description: "从零开始学习NLP基础知识"
    }
  ]
}

// 获取标签数组
const getTags = () => {
  const tags = articleData.value.tags
  if (!tags) return []
  return typeof tags === 'string' ? tags.split(',') : tags
}

// 获取难度文本
const getDifficultyText = (level) => {
  const map = { 1: "入门", 2: "中级", 3: "高级" }
  return map[level] || "未知"
}

// 获取难度标签类型
const getDifficultyType = (level) => {
  const map = { 1: "success", 2: "warning", 3: "danger" }
  return map[level] || "info"
}

// 收藏操作
const handleStar = () => {
  // 这里可以访问 articleData.value
  console.log('收藏文章:', articleData.value.id)
}

// 点赞操作
const handleLike = () => {
  console.log('点赞文章:', articleData.value.id)
}

// 评论操作
const handleComment = () => {
  console.log('评论文章:', articleData.value.id)
}

// 打开链接
const openLink = (url) => {
  window.open(url, '_blank')
}

// 跳转到详情页
const goToDetail = (item) => {
  const type = item.title ? 'blog' : 'ai_project'
  // 这里可以根据需要调用路由跳转
  console.log('跳转到详情页:', item.id, type)
}

// 暴露给模板使用的函数
defineExpose({
  loadArticleData,
  loadComments,
  loadRecommendList,
  getTags,
  getDifficultyText,
  getDifficultyType,
  handleStar,
  handleLike,
  handleComment,
  openLink,
  goToDetail
})

// 如果需要在组件挂载时加载数据，可以这样调用：
onMounted(() => {
  // 从路由参数获取 id 和 type
  const route = useRoute()
  const id = route.params.id
  const type = route.query.type
  loadArticleData(id, type)
  loadComments()
  loadRecommendList()
})
</script>

<style scoped>
.article-detail-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.article-header {
  padding: 0 0 15px 0;
  border-bottom: 1px solid #eee;
}

.article-title {
  font-size: 24px;
}

.article-author-info {
  margin-top: 8px;
}

.article-content {
  margin: 20px 0;
  line-height: 1.8;
}

.article-tags {
  margin-top: 20px;
}

.article-actions {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.recommend-item-card {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.recommend-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recommend-tags {
  margin-top: 10px;
}

.comments-section {
  margin-top: 20px;
}
</style>